* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 去掉列表的圆点 */
ul,
ol,
li {
  list-style: none;
}
img {
  vertical-align: middle;
}
/* 设置a标签的样式 */
a {
  text-decoration: none;
}
/* 加入媒体查询 */
@media only screen and (device-width: 320px) {
  html {
    font-size: 16px;
  }
}
@media only screen and (device-width: 375px) {
  html {
    font-size: 18.75px;
  }
}
@media only screen and (device-width: 414px) {
  html {
    font-size: 20.7px;
  }
}
@media only screen and (device-width: 360px) {
  html {
    font-size: 18px;
  }
}
html,
body,
#app,
.common,
.dialogue {
  height: 100%;
  background-color: #e6e6e6;
}
.common {
  display: flex;
  flex-direction: column;
}
.common .white {
  background-color: #fff;
}
.common .header {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-shrink: 0;
  height: 40/16rem;
  line-height: 40/16rem;
}
.common .header-title {
  font-size: 16/16rem;
}
.common .header-icon {
  position: absolute;
  top: 0;
  right: 5/16rem;
}
.common .header-icon img {
  width: 18/16rem;
}
.common .content {
  flex-grow: 1;
  overflow: auto;
}
.common .content::-webkit-scrollbar {
  display: none;
}
.common .footer {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  justify-content: space-around;
  margin: 5/16rem;
  font-size: 14/16rem;
}
.common .footer div {
  text-align: center;
}
.common .footer div .active {
  color: #07c060;
}
.common .footer div img {
  width: 20/16rem;
}
.chats {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-size: 12/16rem;
  padding: 10/16rem 0 10/16rem 10/16rem;
  background-color: #fff;
}
.chats-left {
  width: 20%;
}
.chats-left img {
  width: 45/16rem;
}
.chats-right {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 80%;
  border-bottom: 1px solid #ededed;
  padding-bottom: 15/16rem;
  vertical-align: middle;
}
.chats-right-msg p:first-child {
  margin: 10/16rem 0;
}
.chats-right-time {
  align-items: right;
  padding-top: 10/16rem;
  padding-right: 10/16rem;
}
.dialogue {
  display: flex;
  flex-direction: column;
}
.dialogue img {
  width: 20/16rem;
}
.dialogue .header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-shrink: 0;
  height: 40/16rem;
  line-height: 40/16rem;
  padding: 0 5/16rem;
}
.dialogue .content {
  overflow: auto;
  flex-grow: 1;
  background-color: #ededed;
  font-size: 14 / 16rem;
}
.dialogue .content img {
  display: inline-block;
  width: 30/16rem;
  height: 30/16rem;
}
.dialogue .content .left {
  display: flex;
  flex-direction: row;
  margin: 10/16rem;
}
.dialogue .content .left span {
  position: relative;
  margin-left: 15/16rem;
  padding: 5/16rem;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 5/16rem;
}
.dialogue .content .left span::before {
  content: "";
  position: absolute;
  top: 5/16rem;
  left: -10/16rem;
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 10/16rem solid rgba(0, 0, 0, 0);
  border-right: 10/16rem solid #fff;
  border-bottom: 10/16rem solid rgba(0, 0, 0, 0);
}
.dialogue .content .right {
  display: flex;
  flex-direction: row-reverse;
  justify-content: right;
  margin: 10/16rem;
  padding-right: 10/16rem;
}
.dialogue .content .right span {
  position: relative;
  display: inline-block;
  margin-right: 15/16rem;
  padding: 5/16rem;
  vertical-align: middle;
  background-color: #07c060;
  border-radius: 5/16rem;
}
.dialogue .content .right span::after {
  content: "";
  position: absolute;
  top: 5/16rem;
  right: -20/16rem;
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 10/16rem solid rgba(0, 0, 0, 0);
  border-right: 10/16rem solid rgba(0, 0, 0, 0);
  border-bottom: 10/16rem solid rgba(0, 0, 0, 0);
  border-left: 10/16rem solid #07c060;
}
.dialogue .footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-shrink: 0;
  height: 40/16rem;
  line-height: 40/16rem;
}
.dialogue .footer input {
  height: 25/16rem;
  outline: none;
  border: none;
  border-radius: 5/16rem;
}
.contacts {
  display: flex;
  flex-direction: row;
}
.contacts img {
  width: 45/16rem;
  margin: 10/16rem;
}
.contacts-left {
  flex-shrink: 0;
}
.contacts-right {
  flex-grow: 1;
  margin: auto 0;
  margin-left: 10/16rem;
  padding: 20/16rem 0;
  border-bottom: 1px solid #ededed;
}
.p {
  padding: 3/16rem;
  background-color: #ededed;
  font-size: 12/16rem;
}
.contacts-company {
  display: flex;
  flex-direction: row;
}
.contacts-company img {
  width: 45px;
  margin: 10/16rem;
}
.friends {
  height: 100%;
  background-color: #fff;
}
.friends img {
  width: 25/16rem;
}
.friends .header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10/16rem;
}
.friends .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 10/16rem;
  border-bottom: 1px solid #e6e6e6;
}
.friends .content-left img {
  display: inline-block;
  width: 50/16rem;
  margin: 10/16rem;
}
.friends .content-right {
  font-size: 14/16rem;
}
.friends .content-right nick {
  padding: 4/16rem;
}
.friends .info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10/16rem 10/16rem 10/16rem 0/16rem;
  margin-left: 10/16rem;
  border-bottom: 1px solid #e6e6e6;
}
.friends .more {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5/16rem;
  border-top: 10/16rem solid #e6e6e6;
  border-bottom: 10/16rem solid #e6e6e6;
}
.friends .tel {
  text-align: center;
  padding: 5/16rem;
  border-bottom: 1px solid #e6e6e6;
}
.bb {
  border-bottom: 10/16rem solid #e6e6e6;
}
.bl {
  border-bottom: 1/16rem solid #e6e6e6;
}
.discover {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #fff;
  padding: 8/16rem;
}
.discover img {
  width: 24/16rem;
}
.me {
  background-color: #fff;
  font-size: 14/16rem;
}
.me .btb {
  border-bottom: 8/16rem solid #e6e6e6;
  border-top: 8/16rem solid #e6e6e6;
}
.me img {
  width: 24/16rem;
}
.me .self {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10/16rem;
  padding-top: 5/16rem;
  padding-bottom: 25/16rem;
}
.me .self .left img {
  width: 60/16rem;
  margin: 10/16rem;
}
.me .self .right {
  flex-grow: 1;
}
.me .self .right .detail {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 4/16rem;
  margin: 3/16rem;
}
.me .self .right .status {
  width: 60/16rem;
  padding: 3/16rem;
  text-align: center;
  border: 1/16rem solid #010101;
  border-radius: 15/16rem;
}
.me-content {
  display: flex;
  flex-direction: row;
  padding: 15/16rem 0 5/16rem 5/16rem;
  align-self: end;
}
.me-content .left {
  flex-shrink: 0;
}
.me-content .left img {
  display: inline-block;
}
.me-content .right {
  padding-left: 15/16rem;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 10/16rem;
}
.me-content .right img {
  display: inline-block;
  padding-right: 8/16rem;
}
.moments {
  overflow: auto;
  height: 100%;
  background-color: #fff;
  position: relative;
}
.moments img {
  width: 24/16rem;
}
.moments .header {
  width: 100%;
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5/16rem;
  z-index: 99;
}
.moments .intro .bg {
  width: 100%;
  height: 200/16rem;
}
.moments .intro .fp {
  position: absolute;
  right: 10/16rem;
  top: 160/16rem;
  width: 60/16rem;
}
.moments .show {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-top: 25/16rem;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
}
.moments .show .left {
  margin-left: 10/16rem;
}
.moments .show .left img {
  width: 40 / 16rem;
}
.moments .show .right {
  width: 100%;
  margin-left: 10/16rem;
}
.moments .show .right .pic {
  margin-top: 15/16rem;
  margin-bottom: 15/16rem;
}
.moments .show .right .pic img {
  width: 150/16rem;
  height: 150/16rem;
}
.moments .show .right .bot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 5/16rem;
  padding-bottom: 8/16rem;
}
.profile {
  width: 100%;
}
.profile img {
  width: 24/16rem;
}
.profile .header {
  position: relative;
  height: 40/16rem;
  line-height: 40/16rem;
}
.profile .header .back {
  position: absolute;
}
.profile .header-title {
  text-align: center;
}
.profile-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #fff;
  padding: 0 5/16rem;
}
.profile-content .left {
  padding: 10/16rem 0;
}
.profile-content .right {
  padding: 10/16rem 0;
}
